<template>
  <div class="mapcontent">
    <div class="allmap" ref="allmap" id="allmap">
        
    </div>
    <div class="tab">
      <div class="icon" @click="haddleClick" >
        <span class="iconfont">v</span>
      </div>
      <navbar v-model="selected">
          <tab-item id="1">酒店</tab-item>
          <tab-item id="2">景点</tab-item>
      </navbar>

      <!-- tab-container -->
      <tab-container v-model="selected">
      <tab-container-item id="1">
        <cell v-for="item in addressList[0]" :key="item.id" :title="item.title" :label="item.label"
         @click.native="haddleCellClick(item.id)"/>
        </tab-container-item>
      <tab-container-item id="2">
        <cell v-for="item in addressList[1]" :key="item.id" :title="item.title" :label="item.label"
         @click.native="haddleCellClick(item.id)"/>
        </tab-container-item>
      </tab-container>
    </div>
  </div>
</template>

<script>
import { Navbar, TabItem,TabContainer,TabContainerItem,Cell } from 'mint-ui';
export default {
  name: 'MapContent',
  data(){
    return{
      flag:'1',
      selected:'1',
      clickFlag:'0',
      addressList:[
        [
          {
            id:'1',
            title:'台骀山风景区',
            label:'迎泽区台骀山风景区'
          },
          {
            id:'2',
            title:'太原站',
            label:'太原站'
          }
        ],
        [
          {
            id:'1',
            title:'太原市晋祠',
            label:'太原市晋祠'
          },
          {
            id:'2',
            title:'太原市五一广场',
            label:'太原市五一广场'
          },{
            id:'3',
            title:'太原市政府',
            label:'太原市政府'
          }
        ]
      ]
    }
  },
  components:{
    Navbar,
    TabItem,
    TabContainer,
    TabContainerItem,
    Cell
  },
  methods:{
    haddleClick(){
      if(this.clickFlag==='0'){
        this.$refs.allmap.style.height="60%"
        this.clickFlag = '1'
      }else{
        this.$refs.allmap.style.height="40%"
        this.clickFlag = '0'
      }
    },
     //创建和初始化地图函数：
    // initMap() {
    //   var map = new BMap.Map("allmap");          // 创建地图实例   传入节点
    //   // // 创建标注
    //   // var marker = new BMap.Marker(point);        // 创建标注    
    //   // map.addOverlay(marker);                     // 将标注添加到地图中
    //   var point = new BMap.Point(112.593123, 37.868101);  // 创建点坐标  
    //   // 经度:112.593123
    //   // 纬度:37.868101
    //   map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别  
    //   map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放  
    //   // 
    //   window.setTimeout(function(){  
    //       map.panTo(new BMap.Point(112.593123, 37.868101));    
    //   }, 2000); 
    //   // 窗口
    //   var opts = {    
    //   width : 50,     // 信息窗口宽度    
    //   height: 20,     // 信息窗口高度    
    //   title : "太原站"  // 信息窗口标题   
    //   }    
    //   var infoWindow = new BMap.InfoWindow("到这里", opts);  // 创建信息窗口对象    
    //   map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
    //   // // 
    //   map.addControl(new BMap.NavigationControl());    
    //   map.addControl(new BMap.ScaleControl());    
    //   map.addControl(new BMap.OverviewMapControl());    
    //   map.addControl(new BMap.MapTypeControl());    
    //   map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用   
    //   var opts = {offset: new BMap.Size(150, 5)}
    //   map.addControl(new BMap.ScaleControl(opts));
    // }
    initMap(x,y){
      var map = new BMap.Map(this.$refs.allmap);  // 创建地图实例   传入节点
      //  逆地址解析：传入一个地址，解析成对应的经纬度
      //  创建地址解析器实例     
      var myGeo = new BMap.Geocoder();  
      // 循环
      for(let i=0;i<this.addressList.length;i++){
        for(let j=0;j<this.addressList[i].length;j++){
          // 取出下标地址
          let title=this.addressList[x][y]
          // 将地址解析结果显示在地图上，并调整地图视野    
          myGeo.getPoint(this.addressList[i][j].title, function(point){  
            // console.log(point)    //打印经纬度
            if(point){
              if (i===x&j===y) {      
                  // 添加标注
                  map.centerAndZoom(point, 16);      // 初始化地图，设置中心点坐标和地图级别  
                  map.addOverlay(new BMap.Marker(point));                
                  map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
                  // 添加信息窗口 
                  var opts = {    
                  width : 200,     // 信息窗口宽度    
                  height: 40,     // 信息窗口高度    
                  // title : "太原站"  // 信息窗口标题   
                  }    
                  var infoWindow = new BMap.InfoWindow(title.title, opts);  // 创建信息窗口对象    
                  map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
        
              }   
            }   
          }, 
        this.$store.state.city);
        }
      }
      // 
    },
    haddleCellClick(id){
      // 区分点击的是哪个内容
      if(this.flag==='1'){
        // 左边
        let page=parseInt(this.flag) - 1
        let index=parseInt(id) - 1
        // 确定了点击的是哪一个
        this.initMap(page,index)
      }else{
        // 右边
        let page=parseInt(this.flag) - 1
        let index=parseInt(id) - 1
        // 确定了点击的是哪一个
        this.initMap(page,index)
      }
    }
  },
  watch:{
    // selected 判断点击的是左边还是右边
    selected(val){
      if(val==='1'){
        this.flag='1'
      }else{
        this.flag='2'
      }
    }
  },
  mounted(){
        //创建和初始化地图函数：
        this.initMap(0,0)
  }
}
</script>


<style lang="stylus" scoped>
.mapcontent 
  z-index 99
  position absolute
  top 0
  left 0
  right 0
  bottom 0
  // background red
  .allmap
      height 60%
      // background blue
  .tab
      height 50%
      z-index 99
      background-color #fff
      .icon
          text-align center
          line-height .6rem
</style>